<script setup name="shopping">
import * as shoppingCartApi from '@/api/shopping.js';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { computed } from 'vue';


const store = useStore();
// 获取购物车数据
store.dispatch('cart/updateCart');
const shoppingList = computed(() => store.state.cart.getShoppingCartList);
// 修改当前购物车数量
function updateCount(skuId, count) {
  store.dispatch('cart/addCart', { skuId, count });
}
// 商品总件数
const total = computed(() => {
  let total = 0;
  shoppingList.value.forEach((item) => {
    total += item.count * item.price;
  });
  return total;
});
// 购物车总数
const totalCount = computed(() => {
  let totalCount = 0;
  shoppingList.value.forEach((item) => {
    totalCount += item.count;
  });
  return totalCount;
});
// 已选择商品总件数
const selectedTotal = computed(() => {
  let selectedTotal = 0;
  shoppingList.value.forEach((item) => {
    if (item.selected) {
      selectedTotal += item.count;
    }
  });
  return selectedTotal;
});


// 猜你喜欢
store.dispatch('cart/cartLike');
const guessLike = computed(() => store.state.cart.getShoppingCartLike);


const open = (skuId) => {
  ElMessageBox.confirm(
    '亲,您是否确认删除商品?',
    '温馨提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      });
      shoppingCartApi.deleteCart([skuId]);
      store.dispatch('cart/updateCart');
    });
};
async function Change({ selected, skuId }) {
  await shoppingCartApi.getCartChecked(skuId, !selected);
  store.dispatch('cart/updateCart');
}
const isAllSelected = computed(()=>{
  if (shoppingList.value.length === 0) {
    return false;
  }
  return shoppingList.value.every((item) => item.selected);
});
</script>


<template>
  <div class="cc">
    <div class="el-container">
      <el-table
        :data="shoppingList"
        style="width: 100%"
      >
        <el-table-column
          width="100"
          prop="selected"
        >
          <template #default="{ row }">
            <el-checkbox :model-value="row.selected" @mouseup.native="Change(row)" />
          </template>
          <template #header>
            <el-checkbox :model-value="isAllSelected" >全选</el-checkbox>
          </template>
        </el-table-column>
        <!-- <el-table-column label="全选" width="80" /> -->
        <el-table-column
          label="商品信息"
          width="380"
          show-overflow-tooltip
          header-align="center"
        >
          <template #default="scope">
            <div class="data">

              <div class="data-img" >
                <img :src="scope.row.picture"/>
              </div>
              <div class="data-write">
                {{ scope.row.name }}
                <div>
                  <span>{{ scope.row.spec }}</span>
                  <span>{{ scope.row.count }}</span>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="单价"
          width="180"
          header-align="center"
        >
          <template #default="scope">
            <div class="data">
              <div class="data-price">
                {{ scope.row.price }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="数量"
          min-width="180"
          header-align="center"
        >
          <template #default="scope">
            <div class="data">
              <div class="data-count">
                <el-input-number
                  v-model="scope.row.count"
                  :min="1"
                  :max="100"
                  @change="updateCount(scope.row.skuId, scope.row.count)"
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="小计"
          min-width="150"
          header-align="center"
        >
          <template #default="scope">
            <div class="data">
              <div class="data-count">
                ￥{{ scope.row.price * scope.row.count }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          header-align="center"
        >
          <template #default="scope">
            <div class="data">
              <div class="data-operate">
                <div>移入收藏夹</div>
                <el-button
                  size="small"
                  type= ""
                  link
                  class="btn"
                  @click="open(scope.row.skuId)"
                >
                  删除
                </el-button>

                <div>找相似</div>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 下单结算 -->
  </div>
  <div class="bb">
    <div class="action el-container">
      <div class="batch">
        <XtxCheckbox
        >
          全选
        </XtxCheckbox>
        <a @click="batchDeleteCart()" href="javascript:;">删除商品</a>
        <a href="javascript:;">移入收藏夹</a>
        <a @click="batchDeleteCart(true)" href="javascript:;">清空失效商品</a>
      </div>
      <div class="total">
        共 {{ totalCount }} 件商品，已选择 {{ selectedTotal }} 件，商品合计：
        <span class="red">¥{{ total }}</span>
        <XtxButton @click="checkout()" type="success">下单结算</XtxButton>
      </div>
    </div>

  </div>
  <!-- 猜你喜欢 -->
  <div class="dd">
    <div class="like el-container">
      <div class="like-title">
        <span>猜你喜欢</span>
      </div>
      <div class="like-list">
        <div class="like-item" v-for="item in guessLike" :key="item.skuId">
          <div class="like-img">
            <img :src="item.picture" />
          </div>
          <div class="like-write">
            <div class="like-name">{{ item.name }}</div>
            <div class="like-price">￥{{ item.price }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scope lang="scss">
.cc{
    padding-top: 50px;
    width: 100%;
    height: 100%;
    padding-bottom: 50px;
    background-color:#f5f5f5;
   .data{
    width: 100%;
    height: 100px;
    display: flex;
    // outline: 1px solid red;
    align-items: center;
    justify-content: center;
    .data-img{
      margin-right: 10px;
      width: 100px;
      height: 100px;
      img{
        width: 100px;
        height: 100px;
      }
    }
    .data-write{
      // width: 200px;
      width: 100%;
      box-sizing: border-box;
        /* 有限的空间才能有溢出的可能 */
        overflow: hidden;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        word-break: break-all;
        line-break: anywhere;
    }
    .data-count{
      color:#d05168;
    }
    .btn{
      color: #2bbeac;
    }
    .data-operate{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

    }
   }
  }
  .bb{
    width: 100%;
    height: 100%;
    padding-bottom: 50px;
    background-color: #f5f5f5;
    .action {
      display: flex;
      background: #fff;
      // width: 100%;
      height: 80px;
      align-items: center;
      font-size: 16px;
      justify-content: space-between;
      // padding: 0 30px;
      .xtx-checkbox {
        color: #999;
      }
      .batch {
        padding-left: 20px;
        a {
          margin-left: 20px;
        }
      }
      .red {
        font-size: 18px;
        margin-right: 20px;
        font-weight: bold;
        color: red;
      }
      .total{
        padding-right: 20px;
      }
    }
  }
  .dd{
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    .like{
      padding-top: 20px;
      display: flex;
      background: #fff;
      // width: 100%;
      // height: 500px;
      align-items: center;
      font-size: 16px;
      justify-content: space-between;
      // padding: 0 30px;
      .like-title{
        width: 100%;
        height: 500px;
        line-height: 50px;
        font-size: 18px;
        font-weight: bold;
        padding-left: 20px;
      }
      .like-list{
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .like-item{
          width: 200px;
          height: 300px;
          margin-bottom: 20px;
          .like-img{
            width: 100%;
            height: 200px;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .like-write{
            width: 100%;
            height: 100%;
            padding: 10px;
            .like-name{
              font-size: 16px;
              font-weight: bold;
              margin-bottom: 10px;
            }
            .like-price{
              font-size: 16px;
              font-weight: bold;
              color: red;
            }
          }
        }
      }
    }
  }
</style>
